<template>
	<view class="nav-bar">
		<view class="status_bar"></view>
		<!-- 导航条 -->
		<view class="nav-bar-wrap">
			<view class="nav-bar-wrap-left flex-c-c" @click="show = true">
				<image src="@/static/icon/more.png" class="iconfont icon-more nav-bar-wrap-left-icon"></image>
				<!-- <text class="iconfont icon-more nav-bar-wrap-left-icon"></text> -->
			</view>
			<view class="nav-bar-wrap-center line-1" @tap="search">
				请输入搜索
			</view>
			<view class="nav-bar-wrap-right flex-c-c">
				<image src="@/static/icon/mic.png" class="iconfont icon-microphone nav-bar-wrap-right-icon">
				</image>
			</view>
		</view>

		<!-- 弹出框 -->
		<view class="nav-bar-popup">
			<view class="status_bar"></view>
			<u-popup :show="show" @close="close" mode="left" closeOnClickOverlay :customStyle="popup">
				<view class="nav-bar-popup-user">
					<!-- 头像和用户名 -->
					<view class="nav-bar-popup-user-head">
						<view class="nav-bar-popup-user-head-img">
							<u-icon name="account" size="28" v-if="user==null"></u-icon>
							<image v-else :src="user.avatarUrl" mode="" @click="userMessage"></image>
						</view>
						<view class="nav-bar-popup-user-head-title">
							<text @click="gotologin" v-if="user==null">前往登录></text>
							<text v-else @click="userMessage">{{user.nickname}}</text>
						</view>
					</view>
					<!-- 扫一扫 -->
					<view class="nav-bar-popup-user-sweep">
						<u-icon name="scan" size="30"></u-icon>
					</view>
				</view>

				<!-- 会员中心 -->
				<view class="nav-bar-popup-vip">
					<view class="nav-bar-popup-vip-top">
						<text class="nav-bar-popup-vip-top-tx1">黑胶VIP•伍</text>
						<text class="nav-bar-popup-vip-top-tx2">会员中心</text>
					</view>
					<view class="nav-bar-popup-vip-center">
						<u--text text="有27成长值待领取" size="13px"></u--text>
					</view>
					<view class="nav-bar-popup-vip-bottom">
						<text class="nav-bar-popup-vip-bottom-text1">
							黑胶现时低至五元！会员日特价！
						</text>
						<view class="nav-bar-popup-vip-bottom-text2">
							<view>黑胶</view>
							<view>五元</view>
						</view>
					</view>
				</view>

				<!-- 消息、创作者中心、云贝中心 -->
				<view class="nav-bar-popup-lattice">
					<!-- 我的消息 -->
					<view class="nav-bar-popup-lattice-icons" @click="gotoMymessage">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>我的消息</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#e5e5e5" length="95%" margin="0 15px"></u-line>
					<!-- 云贝中心 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>云贝中心</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#e5e5e5" length="95%" margin="0 15px"></u-line>
					<!-- 创作者中心 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>创作者中心</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

				</view>

				<!-- 音乐服务 -->
				<view class="nav-bar-popup-lattice">
					<!-- 消息云村有票 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>深色模式</text>

						</view>
						<view>
							<u-switch v-model="value" activeColor="#f9ae3d"
								inactiveColor="rgb(230, 230, 230)"></u-switch>
						</view>
					</view>
					<u-line color="#fff" length="95%" margin="0 15px"></u-line>
					<!-- 云贝中心 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>商城</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<u-line color="#fff" length="95%" margin="0 15px"></u-line>
					<!-- 创作者中心 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>Beat交易平台</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<!-- 游戏专区 -->
					<view class="nav-bar-popup-lattice-icons">
						<view class="nav-bar-popup-lattice-icons-tit">
							<image src="@/static/icon/index-select.png" mode=""></image>
							<text>游戏中心</text>
						</view>
						<view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

				</view>
				<!-- 退出登录/关闭 -->
				<view class="nav-bar-popup-exit" @tap="exit">
					<text>退出登录/关闭</text>
				</view>
			</u-popup>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				show: false, //显示或者隐藏
				popup: {
					width: "80vw",
					background: '#e5e5e5',
				}, //popup弹出层的样式
				user: uni.getStorageSync('UserData').profile, //获取本地缓存的数据


			}
		},
		methods: {

			//关闭弹窗
			close() {
				this.show = false
			},

			//前往登录
			gotologin() {
				uni.reLaunch({
					url: "/components/Login/Login"
				});
			},

			// 回到主页
			search() {
				uni.redirectTo({
					url: '/view/Search/Search'
				})
			}, //search

			// 退出登录
			exit() {
				uni.clearStorage();
				uni.reLaunch({
					url: "/components/Login/Login"
				});
			},

			//前往用户信息
			userMessage() {
				uni.navigateTo({
					url: '/view/UserInfo/UserInfo?id=' + this.user.userId
				})
			},
			
			// 去我的消息
			gotoMymessage() {
				uni.navigateTo({
					url: '/view/information/information'
				})
			},
			change(e) {
				console.log(e);
			},


		}
	}
</script>

<style lang="scss">
	//占位
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9000;
		background-image: linear-gradient(to bottom, #f1f1f1 70%, #ffffff);

		// 导搜索栏
		&-wrap {
			width: 100vw;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left,
			&-right {
				width: 100rpx;
				height: 100%;
				display: flex;

				&-icon {
					width: 40%;
					height: 40%;
					margin: 15px 15px;

				}
			}

			&-center {
				flex: 1;
				height: 72rpx;
				line-height: 72rpx;
				background-color: #fff;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #b6b6b6;
				// font-weight: 700;
			}
		}

		//弹出层
		&-popup {
			height: var(--status-bar-height);

			&-user {
				display: flex;
				justify-content: space-between;
				padding-top: 30rpx;

				&-head {
					display: flex;
					padding: 0 15px;
					justify-content: center;
					align-items: center;

					image {
						width: 30px;
						height: 30px;
						border: 1px solid #fff;
						border-radius: 20px;
					}

					text {
						padding-left: 12px;
						font-size: 16px;
					}
				}

				&-sweep {
					padding-right: 12px;
				}
			}

			// vip中心
			&-vip {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background: linear-gradient(#8D8D8D, #B1B1B1);
				border-radius: 20px;
				margin: 25rpx 30rpx;

				&-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 30rpx;
					box-sizing: border-box;

					&-tx1 {
						font-size: 40rpx;
						color: white;
					}

					&-tx2 {
						font-size: 20rpx;
						text-align: center;
						border-radius: 20rpx;
						padding: 5rpx;
						box-sizing: border-box;
						border: 1px solid #fff;
						color: white;
					}
				}

				&-center {
					margin:0rpx 30rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #ccc;
					background-color: transparent !important;
				}

				&-bottom {
					display: flex;
					height: 100rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;

					&-text1 {
						color: #D9D9D9;
						font-size: 20rpx;
					}

					&-text2 {
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 5px;
						width: 70rpx;
						text-align: center;
						background-color: #F43600;
						color: white;
						font-weight: bold;	
					}
				}
			}

			//消息、创作者中心、云贝中心
			&-lattice {
				margin: 8px 18px;
				border-radius: 10px;
				background-color: #fff;

				&-icons {
					padding: 15px 15px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-tit {
						display: flex;

						image {
							width: 50rpx;
							height: 50rpx;
						}

						text {
							padding: 0 25rpx;
						}
					}
				}
			}

			//退出
			&-exit {
				height: 90rpx;
				margin: 12rpx 40rpx;
				background-color: #fff;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 15px;
					color: #303133;
				}
			}
		}
	}
</style>
